<template>
	<view class="content bgc-f0 p26">
		<navbar>
			<view class="pr10">
				<u-search placeholder="请输入banner名称" v-model="query.name" :animation="true" @search="search"
					@custom="search" @blur="search" :action-style="{color:'#222'}" :clearabled="false"></u-search>
			</view>
			<view slot="right" class="mr20" @click="handAdd">
				新增
			</view>
		</navbar>
		<template v-if="banner.length > 0">
			<template v-for="item in banner">
				<view :key="item.id" class="_list br12 bgc-fff z-flex mb26">
					<view class="bd1 mr20" style="width: 240rpx;height: 150rpx;">
						<image :src="item.url" mode="" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="z-flex z-flex-around flex-1" style="flex-direction: column;">
						<view><text class="fwb c-333">{{item.title}}</text></view>
						<view><text class="fs22 c-666">{{item.path}}</text></view>
					</view>
					<view class="z-flex z-flex-align-c mr20 c-666" @click.stop="handShowAction(item,index)">
						操作
					</view>
				</view>
			</template>
		</template>
		<vempty type="data" v-if="datalen" title="暂无数据"></vempty>
		<u-action-sheet safe-area-inset-bottom :list="actionlist" v-model="showAction" @click="handAction"
			border-radius="20"></u-action-sheet>

		<footerBottom>
			<view class="pl20 pr20 pt20" style="height: 100%;width: 100%;">
				<uni-pagination v-model="current" :total="page.total" @change="changePage" />
			</view>
		</footerBottom>
	</view>
</template>

<script>
	import {
		businessListApi,delBusinessApi
	} from '@/api/shop.js'
	import { bannerListApi,delBannerApi} from '@/api/banner.js'
	export default {
		data() {
			return {
				query: {
					name: '',
					page: 1,
					size: 10,
				},
				page:{
					total: 0
				},
				datalen: false,
				actionlist: [{
					text: '编辑',
					type: 2,
					permissions: "edit"
				}, {
					color: '#ff0000',
					text: '删除',
					subText: '谨慎操作',
					type: 100,
					permissions: "delete"
				}],
				showAction: false,
				current: 1,
				currentObj: {},
				banner: []
			}
		},
		onShow() {
			this.getBannerList()
		},
		methods: {
			async getBannerList(){
				uni.showLoading({title: '加载中'})
				const {code,data} = await bannerListApi({...this.query})
				uni.hideLoading()
				this.banner = data.list
				this.page.total = data.count
				this.datalen = data.list.length == 0
			},
			init(){
				this.query.page = 1
				this.query.size = 10
			},
			handAdd() {
				uni.$u.route({
					url: 'mapPages/backAdmin/banner_add/index',
					params:{
						navTile: '新增banner',
						pageType: 'add'
					}
				})
			},
			handShowAction(i, index) {
				this.currentObj = i
				this.showAction = true
			},
			changePage(e) {
				this.banner = []
				this.query.page = e.current
				this.getBannerList()
			},
			search(val) {
				this.query.page = 1
				this.getBannerList()
			},
			handAction(index) {
				let {
					type,
					text
				} = this.actionlist.filter((i, s) => index == s)[0]
				if (type == 2) {
					// 编辑
					this.$nextTick(() => {
						uni.$u.route({
							url: 'mapPages/backAdmin/banner_add/index',
							params: {
								id: this.currentObj.id,
								navTile: '编辑banner',
								pageType: 'edit'
							}
						})
					})
				}
				if (type == 100) {
					uni.showModal({
						title: '提示',
						content: `确认删除${this.currentObj.name}吗?`,
						confirmText: '确定删除',
						cancelText: '取消',
						success: async (res) => {
							if (res.confirm) {
								await delBannerApi({
									id: this.currentObj.id
								})
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.getBannerList()
							} else if (res.cancel) {
			
							}
						},
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	:root {
		--theme-bg-color: #1abc9c;
	}

	.content {
		width: 100vw;
		height: 100vh;
		overflow: auto;

		.tab {
			padding: 20rpx 0;

			._page {
				position: relative;
				text-align: center;
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;

				._ude {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					border-radius: 8rpx;
					background-color: var(--theme-bg-color);
				}

				._text_height_light {
					color: var(--theme-bg-color);
				}

				._divider {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 2rpx;
					height: 36rpx;
					background-color: #D8D8D8;
					border-radius: 4rpx;
				}
			}
		}

		.list {
			flex: 1;
			padding: 0 30rpx 30rpx;
			overflow-y: auto;

			._li {
				background-color: #fff;
				border-radius: 14rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				._logo {
					width: 300rpx;
					height: 260rpx;
					border: 1px solid var(--theme-bg-color);
					position: relative;

					._store_type {
						position: absolute;
						top: 0;
						left: 0;
						padding: 6rpx 14rpx;
						border-bottom-right-radius: 14rpx;
						color: #fff;
					}

					._store_type_3 {
						background-color: #eb3b5a;
					}

					._store_type_2 {
						background-color: #eacd76;
					}
					
					._store_type_1 {
						background-color: var(--theme-bg-color);
					}

					._notice {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
					}
				}

				._info {
					flex-direction: column;
					box-sizing: border-box;
					padding: 20rpx;
					flex: 1;

					._num {
						color: var(--theme-bg-color);
					}

					._success,
					._danger {
						display: flex;
						align-items: center;
						padding: 6rpx 20rpx;
					}

					._success {
						background-color: #d9f5e8;
						color: var(--theme-bg-color);
						border-radius: 50rpx;
					}

					._danger {
						background-color: #f7dcdc;
						color: #dc3630;
						border-radius: 50rpx;
					}

					._adr {
						._posi {
							width: 22rpx;
							height: 22rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}
</style>
